<template>
	<div>
		<div class="about">
			<Header :class="filterBlur ? 'filterBlur' : ''"></Header>
			<div style="color: white;font-size: 22px;position: absolute;top: 115px;left: 67px;" @click="$router.push({path: '/About'})" :class="filterBlur ? 'filterBlur' : ''">
				<van-icon name="arrow-left"></van-icon>
				<span style="position: absolute;width: 100px;top: -5px;left: 40px;">企业介绍</span>
			</div>
			<div class="content" :class="filterBlur ? 'filterBlur' : ''">
				<!--左边导航-->
				<div class="left">
					<div class="left_both">
						<div class="left_scroll">
							<div v-for="(item,index) in menu_list" :class="currentCompany == index ? 'on':''" :key="index" @click="getCompany(index,item.companyAbbreviation)">{{item.companyAbbreviation}}</div>

						</div>
					</div>
					<div class="left_search">
						<van-search placeholder="搜索企业" v-model="value" background="#454956" @search="searchCompany"></van-search>
						<!--<van-icon name="search" size="23px" style="width: 20px;height: 20px;overflow: hidden;padding-top: 10px;position: relative;top: 2px;left: -5px;padding-top: 5px;padding-left: 2px;" />搜索企业-->
					</div>
				</div>
				<!--右边-->
				<div class="top">
					<div class="top_left">
						<div class="video-box">
							<!-- <video-player class="video-player vjs-custom-skin" ref="videoPlayer" :playsinline="true" :options="playerOptions"></video-player> -->
							<img :src="videoImg" alt="" width="100%">
							 <!--<img src="http://pic27.nipic.com/20130313/9252150_092049419327_2.jpg" alt="" width="100%">--> 
						</div>
					</div>
					<div class="top_right">
						<div>
							<p class="f23 l-height23">{{company.companyAbbreviation}}</p>
							<p class="f20 l-height45">{{company.companyName}}</p>
							<p style="display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 4;overflow: hidden;">
								{{company.companyIntroduction}}
							</p>

						</div>
						<p><span class="more" @click="clickMore">查看更多</span></p>
					</div>
				</div>

				<div class="btm">
					<div class="btnleft" @click="onSwipeRight">
						<van-icon name="arrow-left"></van-icon>
					</div>
					<div class="btnright" @click="onSwipeLeft">
						<van-icon name="arrow"></van-icon>
					</div>
					<p style="font-size: 22px;line-height: 60px;margin-top: 10px;">企业文化</p>
					<div class="btm_photo">
						<div v-for="(item,index) in company_image" :key="index">
							<dt>
							<dl><img :src="item.cultureUrl" width="200" height="120"></dl>
							<dd>{{item.cultureDescribe}}</dd>
						</dt>
						</div>

					</div>
				</div>
			</div>
			<div class="mark" v-show="isMore" :class="isfade ? 'a-fadein' : 'a-fadeout'"></div>
			<div class="dialog_remove a-fadein" v-show="isMore" @click="clickRemove" :class="isfade ? 'a-fadein' : 'a-fadeout'">
				<van-icon name="cross"></van-icon>
			</div>
			<div class="dialog" v-show="isMore" :class="isfade ? 'a-fadein' : 'a-fadeout'">
				<div class="dialog_content">
					{{company.companyIntroduction}}
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import Header from '@/components/Header'
	let _this;
	export default {
		name: 'Index',
		data() {
			return {
				value: '',
				videoImg: '',
				menu_list: [],
				company: [],
				company_image: [],
				current: 1,
				size: 999,
				page: '',
				pageId: '',
				currentCompany: 0,
				isMore: false,
				filterBlur: false,
				isfade: '',
				playerOptions: {
					playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
					autoplay: false, // 如果true,浏览器准备好时开始回放。
					muted: false, // 默认情况下将会消除任何音频。
					loop: false, // 导致视频一结束就重新开始。
					preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
					language: 'zh-CN',
					aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
					fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
					sources: [{
						type: "",
						src: require('../assets/about7.mp4') //视频url地址
					}],
					poster: require('../assets/about1.png'), // 你的封面地址
					notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
					controlBar: {
						timeDivider: true,
						durationDisplay: true,
						remainingTimeDisplay: false,
						fullscreenToggle: true // 全屏按钮
					}
				}
			}
		},
		components: {
			Header
		},
		beforeCreate() { // 创建 vue 实例之前
			_this = this;
		},
		mounted() {
			this.pageId = this.$route.query.pageId;
			this.getMenu();
		},
		methods: {
			// 公司全称搜索
			searchCompany() {
				let params = {
					companyAbbreviation: this.value,
					companyTypeId: this.pageId
				}
				this.$http
					.get("/enterpriseintroduction/selectCompanyNameByCondition", {
						params: params
					})
					.then(res => {
						if(res.data.code == 200) {
							this.menu_list = res.data.data
						} else if(res.code == 500) {
							this.$notify(res.msg);
						}
					});

			},
			async getCompany(index, company) {
				let that = this;
				// tab切换样式				
				that.currentCompany = index;
				let params = {
					size: this.size, //每页条数
					current: this.current, //页码
					companyAbbreviation: company
				}
				let res = await this.$http.get("/enterpriseintroduction/selectCompanyCultureBycompanyAbbreviation", {
					params: params
				})

				if(res.data.code == 200) {
					this.company = res.data.data.company;
					this.company_image = res.data.data.ipage.records;
					this.page = res.data.data.ipage.pages;
					this.videoImg = res.data.data.company.companyUrl
				} else if(res.code == 500) {
					this.$notify(res.msg);
				}

			},
			// 获取左侧公司
			async getMenu() {
				let params = {
					size: this.size, //每页条数
					current: this.current, //页码
					companyTypeId: this.pageId
				}
				let res = await this.$http.get('/enterpriseintroduction/selectCompanyByCompanyTypeId', {
					params: params
				});
				let {
					code,
					data,
					msg
				} = res.data;

				if(code == 200) {
					this.menu_list = data.records;
					let comId = this.menu_list[0].companyAbbreviation;
					this.getCompany(0, comId);

				} else if(res.code == 500) {
					this.$notify(msg);
				}
			},
			onSwipeLeft() { // 左滑
				if(this.current == this.page) {
					this.$notify('无更多');
					return false;
				}
				this.current++;
				this.getCompany(this.currentCompany, this.menu_list[0].companyAbbreviation)

			},
			onSwipeRight() { // 右滑
				if(this.page <= 1) {
					return false;
				}
				this.current--;
				this.getCompany(this.currentCompany, this.menu_list[0].companyAbbreviation)
			},
			clickMore() {
				this.isMore = true;
				this.filterBlur = true;
				this.isfade = true;
			},
			clickRemove() {
				this.isfade = false;
				setTimeout(() => {
					this.filterBlur = false;
				}, 500)
				setTimeout(() => {
					this.isMore = false;
				}, 1000)
			},
		},
		watch: {
			"value": function() {
				this.searchCompany()
			}
		},
	}
</script>

<style lang="less" scoped>
	.content {
		width: 100%;
		position: absolute;
		top: 165px;
		left: 20px;
		padding-right: 66px;
		.left {
			width: 215px;
			height: 440px;
			position: absolute;
			.left_both {
				background: #2d3a4f;
				width: 215px;
				height: 390px;
				overflow: hidden;
				overflow-y: auto;
				.left_scroll {
					width: 214px;
					height: 390px;
					overflow: hidden;
					overflow-y: auto;
					div {
						width: 100%;
						text-align: center;
						padding-top: calc(~"(390px - 270px) / 11");
						font-size: 18px;
						color: #FFFFFF;
						cursor: pointer;
					}
					div:last-child {
						padding-bottom: calc(~"(390px - 270px) / 11");
						;
					}
					.on {
						color: #4ff6d0 !important;
					}
				}
			}
			.left_search {
				line-height: 32px;
				color: #FFFFFF;
				text-align: center;
				font-size: 16px;
				margin-top: 15px;
				background: #454956;
				border-radius: 5px;
			}
		}
		.top {
			margin-left: 246px;
			flex: 1;
			display: flex;
			.top_left {
				/*position: relative;*/
				flex: 1;
				/*float: left;*/
				margin-right: 35px;
				/*.left-bg {
				 	box-shadow: 5px 5px 20px;
				 }
				 .video {
				 	position: absolute;
				 	left: 50%;
				 	top: 50%;
				 	transform: translate(-50%, -50%);
				 	cursor: pointer;
				}*/
			}
			.top_right {
				/*float: right;*/
				flex: 2;
				color: #FFFFFF;
				font-size: 17px;
				line-height: 30px;
				/*position: relative;*/
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				.more {
					/*position: absolute;*/
					/*bottom: -15px;*/
					display: inline-block;
					font-size: 13px;
					background: rgba(255, 255, 255, 0.1);
					border-radius: 50px;
					border: 2px solid rgba(255, 255, 255, 0.8);
					padding: 0px 25px;
					line-height: 25px;
					/*margin-top: 80px;*/
				}
			}
		}
		.btm {
			position: relative;
			margin-left: 246px;
			color: #FFFFFF;
			.btm_photo {
				display: flex;
				justify-content: space-around;
				div {
					float: left;
					/*margin-right: calc(~"(100% - 800px) / 3");*/
					text-align: center;
					font-size: 20px;
					img {
						box-shadow: 5px 5px 20px rgba(0, 0, 0, 1);
						margin-bottom: 5px;
					}
				}
			}
		}
	}
	
	.mark {
		width: 100%;
		height: 100vh;
		background: rgba(0, 0, 0, 0.5);
		z-index: 9;
		position: absolute;
	}
	
	.dialog {
		position: absolute;
		width: 80%;
		height: 61.5vh;
		z-index: 10;
		background: #2d3a4f;
		top: 20%;
		left: 10%;
		transform: translat(calc(-50% + 0.5 px), calc(-50% + 0.5 px));
		border-radius: 20px;
		font-size: 18px;
		color: #FFFFFF;
		overflow-x: auto;
		padding: 25px 10px;
		text-indent: 2rem;
		letter-spacing: 2px;
		line-height: 30px;
		.dialog_content {
			height: 100%;
			overflow: hidden;
			overflow-y: auto;
			padding: 0px 30px;
		}
	}
	
	.dialog_remove {
		position: absolute;
		left: 8%;
		top: 17%;
		font-size: 18px;
		color: #000000;
		background: #a3a7ab;
		width: 26px;
		height: 26px;
		text-align: center;
		justify-content: center;
		padding-top: 2px;
		border-radius: 50%;
		z-index: 10;
	}
	
	/deep/ .van-cell {
		background-color: #454956;
		color: #FFFFFF
	}
	
	/deep/ .van-field__control {
		color: #FFFFFF;
	}
	
	/deep/ .van-field__control ::-webkit-input-placeholder {
		color: #FFFFFF
	}
	/* 使用webkit内核的浏览器 */
	
	:-moz-placeholder {
		color: #FFFFFF
	}
	/* Firefox版本4-18 */
	
	::-moz-placeholder {
		color: #FFFFFF
	}
	/* Firefox版本19+ */
	
	:-ms-input-placeholder {
		color: #FFFFFF
	}
	/* IE浏览器 */
	
	.filterBlur {
		filter: blur(5px);
	}
	
	.mr0 {
		margin-right: 0px !important;
	}
	
	.mt10 {
		margin-top: 10px;
	}
	
	.l-height45 {
		line-height: 45px;
	}
	
	.l-height23 {
		line-height: 23px;
	}
	
	.bold {
		font-weight: bold;
	}
	
	.f23 {
		font-size: 23px;
	}
	
	.f20 {
		font-size: 20px;
	}
	
	/deep/ .van-field__control::placeholder {
		color: white!important;
	}
	
	/deep/ .vjs-big-play-button {
		top: 85px;
		left: 170px;
		height: 3em;
		width: 3em;
		font-size: 2em;
		line-height: 3em;
		border-radius: 3em;
	}
	
	/deep/ .vjs-poster {
		background-color: #2f5e8c;
	}
	
	/deep/ .video-js.vjs-fluid,
	.video-js.vjs-16-9,
	.video-js.vjs-4-3 {
		width: 384px;
		max-width: 384px;
		height: 216px;
	}
	
	.btnleft /deep/ .van-icon {
		font: 48px/1 "vant-icon";
		color: rgb(56, 107, 146);
	}
	
	.btnleft {
		position: absolute;
		left: 0;
		top: 60px;
	}
	
	.btnright /deep/ .van-icon {
		font: 48px/1 "vant-icon";
		color: rgb(53, 86, 114);
	}
	
	.btnright {
		position: absolute;
		left: 0;
		top: 140px;
	}
</style>